<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>My first three.js app</title>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <script type="module">
    import * as THREE from "https://127.0.0.1:9000/build/three.module.js";

    // Our Javascript will go here.
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera();
    // 调整相机位置
    camera.position.z = 10;
    camera.position.y = 2;

    // 创建立方体
    const geometry = new THREE.BoxGeometry();

    // 添加材质
    const material = new THREE.MeshBasicMaterial({
      color: 0x00ff00,
    });

    // 创建网格
    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(0, 3, 0);
    scene.add(cube);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    // 调整渲染器窗口大小
    renderer.setSize(window.innerWidth, window.innerHeight);

    // 在页面中添加元素
    document.body.appendChild(renderer.domElement);

    // 添加一个网格地面
    const gridHepler = new THREE.GridHelper(10, 10);
    scene.add(gridHepler);

    // 让立方体动起来
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      // cube.rotation.y += 0.01;
      // 调用渲染器进行渲染
      renderer.render(scene, camera);
    }

    animate();
  </script>
</body>

</html>